<template>
  <form-item-wrapper :widget="widget" :is-design="isDesign" :parent="parent">
    <el-select
      v-model="state.optionsModel.value"
      :disabled="widget.options.disabled"
      :readonly="widget.options.readonly"
      :placeholder="widget.options.placeholder"
      :clearable="widget.options.clearable"
      :multiple="widget.options.multiple"
      :filterable="widget.options.filterable"
      :allow-create="widget.options.allowCreate"
      @focus="onFocusHandle"
      @blur="onBlurHandle"
      @clear="onClearHandle"
      @change="onChangeHandle"
      @visible-change="onVisibleChangeHandle"
      @remove-tag="onRemoveTagHandle"
    >
      <el-option
        v-for="item in widget.options.optionItem"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
  </form-item-wrapper>
</template>
<script setup>
import { computed, reactive } from 'vue'
import formItemWrapper from './form-item-wrapper.vue'
import registerEvents from '../registerEvents'
const emits = defineEmits(['update:options'])
defineOptions({
  name: 'select-widget',
  mixins: [registerEvents],
})
const props = defineProps({
  widget: {
    type: Object,
    default: () => {},
  },
  isDesign: {
    type: Boolean,
    default: true,
  },
  options: {
    type: Object,
    default: () => {},
  },
  parent: {
    type: Object,
    default: () => {},
  },
})
const state = reactive({
  optionsModel: computed({
    get() {
      return props.options
    },
    set(v) {
      emits('update:options', v)
    },
  }),
})
</script>
<style scoped>
:deep(.el-select) {
  width: 100%;
}
</style>
